<template>
	<a-card>
		<div class="flex gap-4 items-center mb-6 pr-6">
			<a-avatar :size="64">
				<template #icon><UserOutlined /></template>
			</a-avatar>
			<div class="flex-1 leading-8">
				<div style="font-weight: 600; font-size: 16px">姓名：{{ personInfo.contactsName }}</div>
				<div>公司姓名：{{ route.query.customerName }}</div>
			</div>
			<a-button
				v-if="route.query.type === 'PrivateSea'"
				type="primary"
				shape="circle"
				size="large"
				@click="
					callPhone(
						personInfo.id,
						personInfo.customerCode,
						personInfo.contactsPhone,
						route.query.customerName,
						route.query.followUpStatus
					)
				"
			>
				<template #icon><PhoneTwoTone style="font-size: 24px; transform: rotateY(180deg)" /></template>
			</a-button>
		</div>
		<a-space :size="16">
			<a-button v-if="hasPerm('bizLinkerEdit')" @click="toEdit">
				<template #icon><EditOutlined /></template>编辑联系人
			</a-button>
			<a-button v-if="hasPerm('bizLinkerFollowIn')" @click="followVisible = true">
				<template #icon><CheckSquareOutlined /></template>添加跟进
			</a-button>
			<a-button v-if="hasPerm('bizLinkerDelete')" @click="toDelete">
				<template #icon><DeleteOutlined /></template>删除联系人
			</a-button>
		</a-space>
	</a-card>
	<a-card class="mt-4 person_detail">
		<a-tabs activeKey="1">
			<a-tab-pane key="1" tab="联系人资料"></a-tab-pane>
		</a-tabs>
		<div class="font_bold text-base border-0 border-l-4 border-solid border-[#108ee9] pl-2 mb-6">基本信息</div>
		<div class="border border-solid border-[var(--border-color-base)]">
			<a-row class="border-0 border-b border-solid border-[var(--border-color-base)]">
				<a-col class="border-r" :span="4">姓名</a-col>
				<a-col :span="8">{{ personInfo.contactsName }}</a-col>
				<a-col class="border-r border-l" :span="4">手机</a-col>
				<a-col :span="8">{{ personInfo.contactsPhone }}</a-col>
			</a-row>
			<a-row>
				<a-col class="border-r" :span="4">职位</a-col>
				<a-col :span="8">{{ personInfo.contactsPost }}</a-col>
				<a-col :span="4">电话</a-col>
				<a-col :span="8">{{ personInfo.phone }}</a-col>
			</a-row>
		</div>
		<div class="font_bold text-base border-0 border-l-4 border-solid border-[#108ee9] pl-2 my-6">系统信息</div>
		<div class="border border-solid border-[var(--border-color-base)]">
			<a-row class="border-0 border-b border-solid border-[var(--border-color-base)]">
				<a-col class="border-r" :span="4">创建时间</a-col>
				<a-col :span="8">{{ personInfo.createAt }}</a-col>
				<a-col class="border-r border-l" :span="4">创建人</a-col>
				<a-col :span="8">{{ personInfo.createUserName }}</a-col>
			</a-row>
			<a-row>
				<a-col class="border-r" :span="4">最近跟进时间</a-col>
				<a-col :span="8">{{ personInfo.followTime }}</a-col>
				<a-col class="border-r border-l" :span="4">最近修改时间</a-col>
				<a-col :span="8">{{ personInfo.updateAt }}</a-col>
			</a-row>
		</div>
	</a-card>
	<!-- 编辑联系人弹窗 -->
	<person-modal v-if="editPersonVisible" v-model:visible="editPersonVisible" :info="editForm" @finished="editDone" />
	<!-- 添加跟进 -->
	<follow-modal
		v-if="followVisible"
		title="添加跟进"
		:type="followUpType"
		v-model:visible="followVisible"
		:customerCode="personInfo.customerCode"
		:personData="[personInfo]"
		@finished="editDone"
	/>
</template>
<script setup>
	import personModal from './personModal.vue'
	import customerApi from '@/api/biz/customerApi'
	import claimApi from '@/api/biz/claimApi'
	import followModal from '../claimList/followModal.vue'
	import { message, Modal } from 'ant-design-vue'
	import useTabs from '@/utils/useTabs.js'
	import { useRoute, useRouter } from 'vue-router'
	import { globalStore } from '@/store'

	const store = globalStore()

	const route = useRoute()
	const router = useRouter()

	const followUpType = ref(null)
	const initFollowUpType = () => {
		const followUpMap = { PrivateSea: 1, HighSea: 2, CluePrivateSea: 4, ClueHighSea: 5 }
		followUpType.value = followUpMap[route.query.type]
	}

	const personInfo = ref({})
	onBeforeMount(() => {
		initFollowUpType()
		getDeatail()
	})
	const getDeatail = () => {
		customerApi.getPersonDetail({ id: route.query.id }).then((res) => {
			personInfo.value = res
		})
	}
	const editPersonVisible = ref(false)
	const editForm = ref({})
	const toEdit = () => {
		editForm.value = {
			id: personInfo.value.id,
			contactsPhone: personInfo.value.contactsPhone,
			contactsName: personInfo.value.contactsName,
			contactsPost: personInfo.value.contactsPost,
			phone: personInfo.value.phone
		}
		editPersonVisible.value = true
	}

	/**
	 * 拨号
	 */
	const callPhone = (id, code, phone, name, status) => {
		const callTypeMap = { PrivateSea: 2, HighSea: 3, CluePrivateSea: 4, ClueHighSea: 5 }
		store.dashboardNode?.open({ id, code, phone, name, type: callTypeMap[route.query.type], status })
	}
	const followVisible = ref(false)

	const toDelete = () => {
		Modal.confirm({
			title: '提示',
			content: '确认删除吗?',
			okText: '确认',
			onOk: () => {
				customerApi.deleteContacts({ id: personInfo.value.id }).then(() => {
					message.success('删除成功')
					router.back()
				})
			},
			closable: true,
			cancelText: '取消'
		})
	}
	const editDone = (type) => {
		if (type === 6) {
			// 转客户
			router.go(-2)
		} else {
			getDeatail()
		}
	}
</script>
<style lang="less" scoped>
	.person_detail {
		.font_bold {
			font-weight: 600;
		}
		.ant-col {
			padding: 12px;
		}
		.border-r {
			border-right: 1px solid var(--border-color-base);
			background-color: #1890ff12;
		}
		.border-l {
			border-left: 1px solid var(--border-color-base);
		}
	}
</style>
